<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>整机买卖/租赁出租/配件商城</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">
</head>

<body>
    <div class="app" v-cloak>
        <div class="peijianshangcheng fixed-tab">
            <div class=" main ">
                <div class="aside navs">
                    <ul>
                        <li class="nav-item" v-for="nav in listCategories" @click="toggleNav(nav)">
                            <a href="#" :class="['nav-link', {active: selectedCategories === nav.name}]"
                                v-text="nav.name"></a>
                        </li>
                    </ul>
                </div>
                <div class="section">
                    <van-list v-model="loading" :finished="finished" @load="onLoad">
                        <van-swipe class="my-swipe" indicator-color="3F8CEC" autoplay="3000" v-if="swipeList.length>0">
                            <van-swipe-item v-for="(img, index) in swipeList" :key="index">
                                <img v-lazy="img.imgUrl" alt="">
                            </van-swipe-item>
                        </van-swipe>
                        <div class="cangchu whole_sale" v-if="listData&&listData.length>0">
                            <div class="cangchu-item" v-for="(goods,index) in listData" :key="index"
                                @click="gotoDetail(goods)">
                                <img v-lazy="goods.imageUrl?goods.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt=""
                                    class="preview-img">
                                <div class="right">
                                    <p class="cangchu-name" v-text="goods.title"></p>
                                    <div class="info">
                                        <div class="info-item">距离：{{goods.countDistance}}</div>
                                    </div>
                                    <div class="price" v-if="goods.price===null || goods.price === ''">
                                        面议
                                    </div>
                                    <div class="price" v-else>
                                        <div class="unit-price" v-if="goods.price<10000">¥</div>
                                        {{goods.price | filterPrice}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="collect-empty" v-else>
                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                            <div>暂无数据～</div>
                        </div>
                    </van-list>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            var vm = new Vue({
                el: '.app',
                data() {
                    return {
                        loading: false,
                        finished: true,
                        listMoreIndex: [-1, -1, -1],
                        isConfirmMore: false,
                        swipeList: [],
                        show: false,
                        listCategories: [],
                        selectedCategories: undefined,
                        // 列表查询参数
                        queryParam: {
                            // types 类型：0设备售卖 1设备出租 2配件
                            types: [2],
                            categoryIds: [],
                            pageNum: 1,
                            pageSize: 10,
                            userId: null,
                            status: 1,
                            checkStatus:1
                        },
                        // 列表数据
                        listData: [],
                        // 类型 0整机买卖 1租赁出租 2配件
                        categoriesType: 2,
                    }
                },
                filters: {
                    filterPrice: filterPrice
                },
                mounted: function () {
                    if (api.pageParam.queryOwn) {
                        this.queryParam.queryOwn = true
                    } else {
                        this.queryParam.userId = api.pageParam.storeInfo.userId
                    }
                    let vm = this
                    vm.queryParam.types = [vm.categoriesType]
                  //  var location = $api.getStorage('location_home') || {}
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}
                    vm.queryParam.location = JSON.parse(location).location;
                    vm.initCategories()
                    vm.getBanner
                },
                methods: {
                    onLoad() {
                        this.getListDatas()
                    },
                    // 获取轮播
                    getBanner(categoryId) {
                        var vm = this;
                        vm.swipeList = []
                        var param = {
                            bannerType: 1,
                            channel: 0,
                            shopId: api.pageParam.storeInfo.shopId
                        }
                        console.log(JSON.stringify(param));
                        common('getBanner')(param, function (ret) {
                            vm.swipeList = ret.data
                        })
                    },
                    toggleNav(nav) {
                        let vm = this
                        vm.activeNav = nav.name
                        vm.selectedCategories = nav.name;
                        vm.queryParam.categoryIds = [nav.id]
                        vm.queryParam.pageNum = 1
                        vm.listData = []
                        vm.getListDatas()
                    },
                    initCategories: function () {
                        let vm = this
                        release("getCategories")(0, null, vm.categoriesType, function (ret, err) {
                            if (ret.data.list && ret.data.list.length > 0) {
                                ret.data.list.forEach(list => {
                                    vm.listCategories.push({
                                        id: list.id,
                                        name: list.name
                                    })
                                })
                                vm.selectedCategories = ret.data.list[0].name;
                                vm.finished = false
                                vm.queryParam.categoryIds = [ret.data.list[0].id]
                                vm.getListDatas()
                            } else {
                                vm.listCategories.push({
                                    id: null,
                                    name: "暂无数据"
                                })
                            }
                        });
                    },
                    getListDatas: function () {
                        let vm = this
                        vm.listData = []
                        var location = vm.queryParam.location.split(',')
                        var lon = location[0]
                        var lat = location[1]
                        index.product("getListProducts")((vm.queryParam), function (ret) {
                            ret.data.list.map(item => {
                                var countDistance = getDistance(lat, lon, item.location.lat, item.location.lon)
                                item.countDistance = (Number(countDistance) / 1000).toFixed(0)
                            })
                            if (vm.queryParam.pageNum == 1) {
                                vm.listData = ret.data.list
                            } else {
                                vm.listData = vm.listData.concat(ret.data.list)
                            }
                            vm.queryParam.pageNum++
                            vm.loading = false;
                            if (!ret.data.hasNext) {
                                vm.finished = true;
                            }
                        })
                    },
                    gotoDetail(item) {
                        api.openWin({
                            name: "goods_detail_win",
                            url: "../whole_sale/goods_detail_win.html",
                            bounces: false,
                            pageParam: {
                                detailItem: item,
                            }
                        })
                    },
                    forwardPage(url, relative) {
                        api.openWin({
                            name: url,
                            url: (relative || '') + url + ".html",
                            bounces: false,
                            pageParam: {
                                editName: '出租设备',
                                status: 'edit'
                            }
                        });
                    },
                    forwardFrame(url, relative, options) {
                        api.openFrame({
                            name: url,
                            url: (relative || '') + url + '.html',
                            pageParam: options
                        })
                    },
                }
            })
            api.addEventListener({
                name: 'selectBrand'
            }, function (ret, err) {
                if (ret.value.status == 2) return
                var brand = ret.value.brand
                vm.queryParam.brandIds = []
                if (brand.id > 0) vm.queryParam.brandIds = [brand.id]
                vm.queryParam.pageNum = 1
                vm.getListDatas()
            });
            api.addEventListener({
                name: 'filterDistrict'
            }, function (ret, err) {
                if (ret.value.status == 2) return
                vm.queryParam.areaIds = []
                if (ret.value.city.id > 0) vm.queryParam.areaIds = [ret.value.city.id]
                vm.queryParam.pageNum = 1
                vm.getListDatas()
            });
        }
    </script>
</body>

</html>
